﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>winformMapDemo</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html, body  {
            height: 100%;
            width: 100%;

        }
        #container{
            width:600px;
            height: 400px;
        }
        .custom-input-card {
            width: 18rem;
        }

        .custom-input-card .btn:last-child {
            margin-left: 1rem;
        }

        .content-window-card {
            position: relative;
            width: 23rem;
            padding: 0.75rem 0 0 1.25rem;
            box-shadow: none;
            bottom: 0;
            left: 0;
        }
        .input-item {
            display:block;
            padding:0.5em 0.2em;
        }

    </style>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=705e948129bff7ebf2b779901b082c64&plugin=AMap.Geocoder"></script>
    <script type="text/javascript">    //地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
        var map = new AMap.Map("container", {
            resizeEnable: true,
            //center: [116.481181, 39.989792],
            zoom: 16
        });
        // 同时引入工具条插件，比例尺插件和鹰眼插件
        AMap.plugin([
            'AMap.ToolBar',
            'AMap.Scale',
            'AMap.Geolocation',
        ], function () {
            // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            map.addControl(new AMap.ToolBar());

            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            map.addControl(new AMap.Scale());
            // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置

            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true,        //显示定位按钮，默认：true
                buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', function(data){
                if(data.info == 'SUCCESS'){
                    //console.log(data.position)
                    //console.log(data.formattedAddress)
                }
            });//返回定位信息
            AMap.event.addListener(geolocation, 'error', function () {
                window.external.ShowMessage("定位失败，请刷新重试","系统提示","Error");
            });      //返回定位出错信息
            
            //map.addControl(new AMap.Geolocation());
        })


        //处理地图单击事件
        map.on('click', function (ev) {
            // 触发事件的地理坐标，AMap.LngLat 类型
            var lnglat = ev.lnglat;
            regeoCode(lnglat);
            //console.log(lnglat);
            //addMarker(lnglat.lng,lnglat.lat)
            window.external.Updatelnglat(lnglat);
            window.external.AddDevice(lnglat);    
        });
        

        function showMessage(msg) {
            alert(msg);
        }

        var geocoder;
        var address = "";
        function regeoCode(lnglat) {
            if (!geocoder) {
                geocoder = new AMap.Geocoder({
                    city: "010", //城市设为北京，默认：“全国”
                    radius: 1000 //范围，默认：500
                });
            }
            geocoder.getAddress(lnglat, function (status, result) {
                if (status === 'complete' && result.regeocode) {
                    address = result.regeocode.formattedAddress;

                } else {
                    address = "";
                }
                window.external.UpdateAddress(address);
            });
        }

        var infoWindow;
        //在指定位置打开信息窗体(内部调用)
        function openInfo(contentStr, lnglat) {
            //构建信息窗体中显示的内容
            infoWindow = new AMap.InfoWindow({
                content: contentStr,
                offset: new AMap.Pixel(0,-36)
            });

            infoWindow.open(map, lnglat);

        }
        //通过信息窗体显示设备内容（内部调用）
        function showDeviceContent(lnglat) {
            //map.setCenter(lnglat);
            var jsonStr = window.external.GetDeviceInfo(lnglat.lng, lnglat.lat);
            if (!jsonStr) {
                window.external.ShowMessage("获取设备信息失败","系统提示","Error");
                return;
            } else {
                var deviceInfo = JSON.parse(jsonStr)
                var info = [];
                info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
                info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>设备名称：" + deviceInfo.DeviceName + "</h4>");
                info.push("<p class='input-item'>设备编号 : " + deviceInfo.DeviceNo + "</p>");
                info.push("<p class='input-item address'>设备地址：" + deviceInfo.DeviceAddress + "</p></div></div>");
                var contentStr = info.join("");
                openInfo(contentStr, lnglat)
            }
        }

        //添加标记物（winform调用）
        function addMarker(deviceNo,lng,lat) {
            marker = new AMap.Marker({
                //icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                icon:"./img/machine.png",
                position: [lng,lat],
                offset: new AMap.Pixel(-34, -68),
                extData: {
                    no: deviceNo
                }
            });
            marker.setMap(map);
            //鼠标放在覆盖物上，查看详情
            marker.on("click", function () {
                var pos = new AMap.LngLat(lng,lat,false);
                showDeviceContent(pos);
                //激活winfrom窗体内对应的设备
                window.external.ActiveDeviceInfo(deviceNo);
            });
        }

        //查询设备对应的覆盖物对象（内部调用）
        function queryDeviceMappedMarker(deviceNo) {
            var allMarker = map.getAllOverlays('marker');
            var targetMarker;
            for (var item in allMarker) {
                var deviceItem = allMarker[item];
                var deviceInfoExtData = allMarker[item].getExtData();
                if (deviceInfoExtData.no == deviceNo) {
                    targetMarker = deviceItem;
                    break;
                }
            }
            return targetMarker;
        }

        //显示设备详情(winform调用)
        function showDeviceDetails(deviceNo) {
            var marker = queryDeviceMappedMarker(deviceNo);
            if (!marker) {
                window.external.ShowMessage("移除设备失败", "系统提示", "Error");
                return false;
            } else {
                var deviceInfoExtData = marker.getExtData();
                if (deviceInfoExtData.no == deviceNo) {
                    var lnglat = marker.getPosition();
                    showDeviceContent(lnglat);
                }
            }
        }
        //移除设备信息 （winform调用）
        function removeDeviceInfo(deviceNo) {
            var marker = queryDeviceMappedMarker(deviceNo);
            if (!marker) {
                window.external.ShowMessage("移除设备失败", "系统提示", "Error");
                return false;
            } else {
                map.remove(marker);
                if (infoWindow) { infoWindow.close();}
                return true;
            }
            
        }
    </script>
</body>

</html>